<template>

  <div class="container">
    <div ref="parent" class="gamemap">
      <canvas ref="chess" id="chess" class="chess" :width="canvaswith" :height="canvasheight"></canvas>
    </div>
    <button class="custom-btn btn-13" @click="start" type="button">重新开始</button>
    <button class="custom-btn1 btn-13" @click="restart" type="button">退出</button>
  </div>


</template>

<script>
import { useStore } from 'vuex'
export default {
  // 赢法数组
 
  setup() {
    const store = useStore(); 
   
    const start=()=>{
     
    }
    const restart = () => {
      store.commit("updateStatus", "select_game");
    }
    return {
      restart,
      start,
    }
  },
  data() {

    return {
      canvaswith: 450,
      canvasheight: 450,
      context: null,
    };
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw: function () {
      let chess = document.getElementById('chess')
      this.context = this.$refs.chess.getContext("2d");
      let context = this.$refs.chess.getContext("2d")
      let me = true
      let chessBoard = []
      let over = false


      let wins = []

      // 赢法的统计数组
      let myWin = []
      let computerWin = []

      for (let i = 0; i < 15; i++) {
        chessBoard[i] = []
        for (let j = 0; j < 15; j++) {
          chessBoard[i][j] = 0
        }
      }

      // 三维数组
      for (let i = 0; i < 15; i++) {
        wins[i] = []
        for (let j = 0; j < 15; j++) {
          wins[i][j] = []
        }
      }

      // 横线赢法
      let count = 0
      for (let i = 0; i < 15; i++) {
        for (let j = 0; j < 11; j++) {
          // wins[0][0][0] = true
          // wins[0][1][0] = true
          // wins[0][2][0] = true
          // wins[0][3][0] = true
          // wins[0][4][0] = true

          // wins[0][1][1] = true
          // wins[0][2][1] = true
          // wins[0][3][1] = true
          // wins[0][4][1] = true
          // wins[0][5][1] = true
          for (let k = 0; k < 5; k++) {
            wins[i][j + k][count] = true
          }
          count++
        }
      }

      // 竖线赢法
      for (let i = 0; i < 15; i++) {
        for (let j = 0; j < 11; j++) {
          for (let k = 0; k < 5; k++) {
            wins[j + k][i][count] = true
          }
          count++
        }
      }

      // 斜线赢法
      for (let i = 0; i < 11; i++) {
        for (let j = 0; j < 11; j++) {
          for (let k = 0; k < 5; k++) {
            wins[i + k][j + k][count] = true
          }
          count++
        }
      }

      // 散斜线赢法
      for (let i = 0; i < 11; i++) {
        for (let j = 14; j > 3; j--) {
          for (let k = 0; k < 5; k++) {
            wins[i + k][j - k][count] = true
          }
          count++
        }
      }


      for (let i = 0; i < count; i++) {
        myWin[i] = 0
        computerWin[i] = 0
      }

      context.beginPath();
      context.strokeStyle = '#000'
      let logo = new Image()
      logo.src = 'https://s1.ax1x.com/2020/10/25/BeoauD.jpg'
      logo.onload = function () {
        context.drawImage(logo, 0, 0, 450, 450)
        drawChessBoard()
      }
      const drawChessBoard = function () {
        for (let i = 0; i < 15; i++) {
          context.moveTo(15 + i * 30, 15)
          context.lineTo(15 + i * 30, 435)
          context.stroke()

          context.moveTo(15, 15 + i * 30)
          context.lineTo(435, 15 + i * 30)
          context.stroke()
        }
      }



      let oneStep = function (i, j, me) {
        context.beginPath()
        context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI)
        context.closePath()
        let gradient = context.createRadialGradient(
          15 + i * 30 + 2, 15 + j * 30 - 2, 13,
          15 + i * 30 + 2, 15 + j * 30 - 2, 0,
        )
        if (me) {
          gradient.addColorStop(0, '#0A0A0A')
          gradient.addColorStop(1, '#636766')
        } else {
          gradient.addColorStop(0, '#D1D1D1')
          gradient.addColorStop(1, '#F9F9F9')
        }

        context.fillStyle = gradient
        context.fill()
      }



      chess.onclick = function (e) {
        if (over) {
          return
        }
        if (!me) {
          return
        }
        let x = e.offsetX
        let y = e.offsetY
        let i = Math.floor(x / 30)
        let j = Math.floor(y / 30)
        if (chessBoard[i][j] === 0) {
          oneStep(i, j, me)
          chessBoard[i][j] = 1

          for (let k = 0; k < count; k++) {
            if (wins[i][j][k]) {
              myWin[k]++
              computerWin[k] = 6
              if (myWin[k] === 5) {
                window.alert('你赢了')

                over = true
              }
            }
          }
          if (!over) {
            me = !me
            computerAI()
          }
        }
      }

      let computerAI = function () {
        let myScore = []
        let computerScore = []
        let max = 0
        let u = 0, v = 0
        for (let i = 0; i < 15; i++) {
          myScore[i] = []
          computerScore[i] = []
          for (let j = 0; j < 15; j++) {
            myScore[i][j] = 0
            computerScore[i][j] = 0
          }
        }
        for (let i = 0; i < 15; i++) {
          for (let j = 0; j < 15; j++) {
            if (chessBoard[i][j] === 0) {
              for (let k = 0; k < count; k++) {
                if (wins[i][j][k]) {
                  if (myWin[k] === 1) {
                    myScore[i][j] += 200
                  } else if (myWin[k] === 2) {
                    myScore[i][j] += 400
                  } else if (myWin[k] === 3) {
                    myScore[i][j] += 2000
                  } else if (myWin[k] === 4) {
                    myScore[i][j] += 10000
                  }
                }
                if (wins[i][j][k]) {
                  if (computerWin[k] === 1) {
                    computerScore[i][j] += 220
                  } else if (computerWin[k] === 2) {
                    computerScore[i][j] += 420
                  } else if (computerWin[k] === 3) {
                    computerScore[i][j] += 2100
                  } else if (computerWin[k] === 4) {
                    computerScore[i][j] += 20000
                  }
                }
              }
              if (myScore[i][j] > max) {
                max = myScore[i][j]
                u = i
                v = j
              } else if (myScore[i][j] === max) {
                if (computerScore[i][j] > computerScore[u][v]) {
                  u = i
                  v = j
                }
              }

              if (computerScore[i][j] > max) {
                max = computerScore[i][j]
                u = i
                v = j
              } else if (computerScore[i][j] === max) {
                if (myScore[i][j] > myScore[u][v]) {
                  u = i
                  v = j
                }
              }
            }
          }
        }
        oneStep(u, v, false)
        chessBoard[u][v] = 2
        for (let k = 0; k < count; k++) {
          if (wins[u][v][k]) {
            computerWin[k]++
            myWin[k] = 6
            if (computerWin[k] === 5) {
              window.alert('你失败了')
              over = true
            }
          }
        }
        if (!over) {
          me = !me
        }
      };


    },
  }


}
</script>

<style scoped>
canvas {
  display: block;
  margin: 50px auto;
  box-shadow: -2px -2px 2px #000, 5px 5px 5px #000;
}

.container {
  width: 60vw;
  height: 70vh;
  margin: 40px auto;
}

div.gamemap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.frame {
  width: 90%;
  margin: 40px auto;
  text-align: center;
}

button {
  margin: 20px;

}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
  margin-left: 13vw;
}

.custom-btn1 {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  outline: none;
  margin-left: 17vw;
}



/* 贪吃蛇按钮效果 */

.btn-13 {
  background-color: #89d8d3;
  background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
  border: none;
  z-index: 1;
}

.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #4dccc6;
  background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}

.btn-13:hover {
  color: #fff;
}

.btn-13:hover:after {
  top: 0;
  height: 100%;
}

.btn-13:active {
  top: 2px;
}
</style>